<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 组织架构的内容 -->
      <el-card class="tree-card">
        <!-- 放置内容，用了一个行列布局 -->
        <Treetools :tree-node="company" :is-root="true" @addDepts="addDepts" />
        <!-- 放置一个tree 右边内容-->
        <el-tree :data="departs" :props="defaultProps" :default-expand-all="true">
          <!-- 传入内容 插槽内容 作用域插槽，这里有问题！！！vue2.6版本前的这个作用域插槽可以有参数slot-scope(node, data)，这里的vue是2.6版本的，只能使用v-slot，这里不知怎么渲染数据到这上面 -->
          <!-- 这里传属性的时候会把大写分开其实是treeNode -->
          <Treetools slot-scope="{ data }" :tree-node="data" @delDepts="getDepartments" @addDepts="addDepts" @editDepts="editDepts" />
        </el-tree>
      </el-card>
    </div>
    <!-- 放置我的新增的弹出组件 -->
    <add-dept ref="addDept" :show-dialog.sync="showDialog" :tree-node="node" @addDepts="getDepartments" />
  </div>
</template>

<script>
import Treetools from './components/tree-tools'
import { getDepartments } from '@/api/departments'
import { tranListToTreeData } from '@/utils/index'
import AddDept from './components/add-dept.vue'
export default {
  components: {
    Treetools,
    AddDept
  },
  data() {
    return {
      company: { name: '零大魔王人力资源管理系统', manager: '负责人' },
      departs: [{ name: '总裁办', manager: '曹操', children: [{ name: '董事会', manager: '曹丕' }] },
        { name: '行政部', manager: '刘备' },
        { name: '人事部', manager: '孙权' }],
      defaultProps: {
        label: 'name' // 表示 从这个属性显示内容
      },
      showDialog: false, // 显示窗体
      node: null // 记录当前点击的Node节点
    }
  },
  created() {
    // 调用自身的方法,这里没有直接调用另外一个组件的方法，而是创建了一个函数去指向这个方法，因为这个方法可能经常使用，为了方便，就这样写
    this.getDepartments()
  },
  methods: {
    async getDepartments() {
      const result = await getDepartments()
      // this.company = { name: result.companyName, manager: '负责人' }
      // 这里的departs不是树形结构,所以这里需要吧这个东西转换为树形结构
      // 我们需要将数组结构,转换为树形结构,使用递归算法,这里使用返回的Pid进行树形管理
      this.departs = tranListToTreeData(result.depts, '')
      console.log(result)
      this.company = { name: '零大魔王的公司', manager: '负责人', id: '' }
    },
    // 监听treeNode中触发点击添加子部门的事件
    addDepts(node) {
      this.showDialog = true // 显示弹层
      // 因为node是当前的点击的部门， 此时这个部门应该记录下来,
      this.node = node
    },
    editDepts(node) {
      this.showDialog = true
      this.node = node
      // 应该在这里调用获取部门详情的方法
      this.$refs.addDept.getDepartDetail(node.id)
    }
  }
}
</script>

<style scoped>
.tree-card {
  padding: 30px  140px;
  font-size:14px;
}
</style>
